<template>
<div class="detail">
    <div class="Box" :style="{ backgroundImage: 'url(' + (list.info&&list.info.poi_back_pic_url)+') '}">
        <div @click="$router.go(-1)">
            <van-nav-bar left-arrow>
                <template #right>
                    <van-icon name="close" size="18" color="#43a5eb" />
                </template>
            </van-nav-bar>
        </div>
        <div class="topBox">
            <div class="name">
                <div><img :src="list.info&&list.info.head_pic_url" alt=""></div>
                <div>{{ list.info && list.info.name}}</div>
                <div v-if="delCollect" style="color:red" @click="$store.commit('cancel_collect',list)">♥</div>
                <div v-else  @click="$store.commit('collect',list)">♥</div>
            </div>
            <div class="box">
                <input type="text" value="搜素">
                <span>点餐</span>
                <span>评价 {{ list.info && list.info.wmPoiScore}}</span>
                <span>商家</span>
            </div>
        </div>
    </div>

    <div class="boxLeft">
        <div class="left">
        <van-sidebar v-model="activeKey">
            <van-sidebar-item title="热销" />
            <van-sidebar-item title="优惠" />
            <van-sidebar-item v-for="(item,index) in list.taglist" :key="index" :title="item.name" />
        </van-sidebar>
        </div>
        <div class="right">
            <div class="good" v-for="(item,index) in list.taglist && list.taglist[activeKey].goodlist"
                :key="index">
                <div class="imgbox">
                    <img :src="item.picture" alt="">
                </div>
                <div class="text">
                    <div class="up">
                        <div class="name">{{item.name}}</div>
                        <div class="desc">{{item.month_saled_content}}</div>
                    </div>
                    <div class="down">
                        <div class="price">¥{{item.min_price}}</div>
                        <div class="opes">
                            <!-- <span>-</span>
                            <span>1</span>
                            <span>+</span> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { shop_shopinfo } from '../utils/api'
import { Toast } from 'vant';


export default {
    data() {
        return {
            activeKey: 0,
            list:[],
            }
    },
    methods: {
        
    },
    computed: {
        //该店铺是否被收藏
        delCollect() {
            var index = this.$store.state.collectList.findIndex((item) => {
                return item.mtWmPoiId == this.list.mtWmPoiId;
            })
                return index!==-1
        }
    },
    mounted() {
        //发请求拿到店铺的列表
        shop_shopinfo({ id: this.$route.params.id }).then((res) => {
            if (res.data.code == 200) {
                this.list = res.data.shopinfo;
                // console.log(this.list);
            } else if (res.data.code == 400){
                Toast(res.data.msg);
                this.$router.go(-1);
            }
            // console.log(res);
        })
    },
    
}
</script>

<style lang="scss" scoped>
.detail{
    .Box {
        opacity: .8;
        .topBox {
        width: 100%;
        background-size:100% ;
            .box {
                margin-left: 4%;
                padding: 40px 0 20px 0 ;
                span {
                    margin: 10px 15px;
                }

                input {
                    width: 50px;
                    background-color: rgb(236, 224, 224);
                    border-radius: 4px;
                    border: none;
                }
            }
            .name{
                width: 95%;
                margin:10px 2.5% ;
                display: flex;
                justify-content: space-between;
                div{}
                &:first-child{
                    img{
                        width: 60px;
                    }
                }
            }
        }
    }
.boxLeft {
    display: flex;
    .left {
        width: 80px;
    }

    .right {
        flex: 1;

        .good {
            display: flex;
            margin: 10px;

            .imgbox {
                width: 80px;
                margin-right: 10px;

                img {
                    width: 100%;
                }
            }

            .text {
                flex: 1;
                font-size: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .down {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
}
</style>